<template>
  <div class="index-num">
    <a-row class="index-row-value">
      <a-col class="index-col">
        <div class="qiu total-icon">
          <p>{{ renderTotal.toFixed(0) }}</p>
        </div>
      </a-col>
      <a-divider type="vertical" class="index-divider" />
      <a-col class="index-col">
        <div class="qiu negative-icon">
          <p>{{ renderNegative.toFixed(0) }}</p>
        </div>
      </a-col>
      <a-divider type="vertical" class="index-divider" />
      <a-col class="index-col">
        <div class="qiu positive-icon">
          <p>{{ renderPositive.toFixed(0) }}</p>
        </div>
      </a-col>
    </a-row>
    <a-row class="index-row-label">
      <a-col class="index-col">全部预警数</a-col>
      <a-col class="index-col">负面数(占{{ props.overviewData.negative_count.percentage }}%)</a-col>
      <a-col class="index-col">正面/中性数(占{{ props.overviewData.positive_or_neutral.percentage }}%)</a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import gsap from 'gsap';

const props = defineProps({
  overviewData: {
    type: Object,
    default: () => ({
      negative_count: {
        count: 0,
        percentage: 0
      },
      positive_or_neutral: {
        count: 0,
        percentage: 0
      },
      total: 0
    })
  }
});

const renderNegative = ref<number>(0);
const renderPositive = ref<number>(0);
const renderTotal = ref<number>(0);

watch(
  () => props.overviewData,
  value => {
    gsap.to(renderNegative, { duration: 1, value: +value.negative_count.count });
    gsap.to(renderPositive, { duration: 1, value: +value.positive_or_neutral.count });
    gsap.to(renderTotal, { duration: 1, value: +value.total });
  },
  {
    deep: true
  }
);
</script>

<style lang="scss" scoped>
@font-face {
  font-family: electronicFont;
  src: url('@/assets/font/DS-DIGIT.TTF');
}

.index-num {
  background-color: rgba(15, 33, 89, 0.5);
  border-radius: 4px;
  .qiu {
    position: relative;
    width: 5rem;
    height: 5rem;
    font-family: electronicFont;
    margin: auto;
    display: table;
    p {
      display: table-cell;
      vertical-align: middle;
    }
    &::before,
    &::after {
      content: '';
      display: block;
      width: 5rem;
      height: 5rem;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      animation: scale 2s linear infinite;
    }
    &::after {
      animation: scale 3s linear infinite;
    }
  }
  @keyframes scale {
    0% {
      transform: translate(-50%, -50%) scale(0.9);
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(1.5);
      opacity: 0;
    }
  }

  .index-row-value {
    position: relative;
    padding: 18px 0 8px;

    .index-col {
      flex: 1;
      font-family: electronicFont;
      font-size: 30px;
      color: #ffffff;
      text-align: center;
      .total-icon {
        background: url(../../../../assets/images/cicle04.png) no-repeat center;
        background-size: 100%;
        &::before,
        &::after {
          border: 4px solid rgba(10, 84, 234, 0.8);
        }
      }
      .negative-icon {
        background: url(../../../../assets/images/cicle02.png) no-repeat center;
        background-size: 100%;
        &::before,
        &::after {
          border: 4px solid rgba(40, 189, 162, 0.8);
        }
      }
      .positive-icon {
        background: url(../../../../assets/images/cicle01.png) no-repeat center;
        background-size: 100%;
        &::before,
        &::after {
          border: 4px solid rgba(189, 166, 110, 0.8);
        }
      }
    }

    .index-divider {
      height: unset;
      margin-block: 20px;
      background: rgb(255 255 255 / 20%);
    }
  }

  .index-row-label {
    color: rgb(255 255 255 / 70%);

    .index-col {
      flex: 1;
      margin: 8px 0;
      font-size: 16px;
      text-align: center;
    }
  }
}
</style>
